<template>
  <view class="bg-white h-screen flex flex-col">
    <!-- 步骤指示器 -->
    <view class="px-6 pt-6 pb-6">
      <view class="flex items-center justify-between">
        <view class="flex flex-col items-center">
          <view :class="['w-8 h-8 rounded-full flex items-center justify-center font-medium', 
            currentStep >= 1 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500']">1</view>
          <text :class="['text-xs mt-1', currentStep >= 1 ? 'text-blue-500' : 'text-gray-400']">搜索设备</text>
        </view>
        <view class="flex-1 h-1 bg-gray-200 mx-2 relative">
          <view :class="['absolute inset-y-0 left-0 bg-blue-500 transition-all duration-500', 
            currentStep >= 2 ? 'w-full' : 'w-0']"></view>
        </view>
        <view class="flex flex-col items-center">
          <view :class="['w-8 h-8 rounded-full flex items-center justify-center font-medium',
            currentStep >= 2 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500']">2</view>
          <text :class="['text-xs mt-1', currentStep >= 2 ? 'text-blue-500' : 'text-gray-400']">WiFi配置</text>
        </view>
        <view class="flex-1 h-1 bg-gray-200 mx-2 relative">
          <view :class="['absolute inset-y-0 left-0 bg-blue-500 transition-all duration-500',
            currentStep >= 3 ? 'w-full' : 'w-0']"></view>
        </view>
        <view class="flex flex-col items-center">
          <view :class="['w-8 h-8 rounded-full flex items-center justify-center font-medium',
            currentStep >= 3 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500']">3</view>
          <text :class="['text-xs mt-1', currentStep >= 3 ? 'text-blue-500' : 'text-gray-400']">完成</text>
        </view>
      </view>
    </view>

    <!-- 步骤内容区域 -->
    <view class="flex-1 px-6 overflow-auto">
      <!-- 步骤1：蓝牙搜索 -->
      <view v-if="currentStep === 1" class="h-full flex flex-col">
        <text class="text-lg font-medium mb-4">选择您的设备</text>
        <text class="text-gray-500 mb-6">请确保您的沙画设备已开机并处于配对模式</text>
        
        <!-- 搜索动画 -->
        <view class="flex justify-center mb-6">
          <view class="relative">
            <view class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center">
              <text class="fas fa-mountain text-3xl text-blue-500"></text>
            </view>
            <view v-if="isSearching" class="absolute inset-0 border-4 border-blue-500 rounded-full animate-ping opacity-30"></view>
          </view>
        </view>
        
        <!-- 设备列表 -->
        <view class="flex-1 space-y-3 overflow-auto">
          <view 
            v-for="device in deviceList" 
            :key="device.id"
            class="bg-white rounded-xl p-4 border border-gray-100 shadow-sm flex items-center justify-between device-item transition-colors"
            :class="selectedDevice?.id === device.id ? 'border-blue-500' : 'hover:border-blue-500'"
          >
            <view class="flex items-center space-x-3">
              <text class="fas fa-mountain text-xl text-gray-400"></text>
              <view>
                <text class="font-medium block">{{ device.name }}</text>
                <text class="text-xs text-gray-500">信号强度: {{ device.signalStrength }}</text>
              </view>
            </view>
            <button class="text-blue-500 font-medium" @click="connectDevice(device)">连接</button>
          </view>
        </view>
        
        <!-- 刷新按钮 -->
        <view class="py-4">
          <button 
            class="w-full py-3 border border-blue-500 text-blue-500 rounded-xl font-medium transition-colors"
            :class="isSearching ? 'bg-blue-50' : 'hover:bg-blue-50'"
            @click="refreshDevices"
            :disabled="isSearching"
          >
            <text class="fas fa-sync-alt mr-2" :class="isSearching ? 'fa-spin' : ''"></text>
            <text>{{ isSearching ? '搜索中...' : '刷新' }}</text>
          </button>
        </view>
      </view>

      <!-- 步骤2：WiFi配置 -->
      <view v-if="currentStep === 2" class="h-full flex flex-col">
        <text class="text-lg font-medium mb-4">配置WiFi连接</text>
        <text class="text-gray-500 mb-6">请选择一个WiFi网络并输入密码</text>
        
        <view class="space-y-4 flex-1">
          <!-- WiFi选择 -->
          <view class="relative">
            <text class="text-sm text-gray-600 mb-1 block">WiFi网络</text>
            <picker 
              :value="wifiIndex" 
              :range="wifiOptions" 
              @change="onWifiChange"
              class="w-full"
            >
              <view class="w-full px-4 py-3 rounded-xl bg-gray-100 border border-gray-200 focus:border-blue-500 flex items-center justify-between">
                <text>{{ wifiForm.network || '请选择WiFi网络' }}</text>
                <text class="fas fa-chevron-down text-gray-400"></text>
              </view>
            </picker>
          </view>
          
          <!-- WiFi密码 -->
          <view class="relative">
            <text class="text-sm text-gray-600 mb-1 block">WiFi密码</text>
            <view class="relative">
              <input 
                :type="showPassword ? 'text' : 'password'"
                v-model="wifiForm.password"
                placeholder="请输入WiFi密码" 
                class="w-full px-4 py-3 rounded-xl bg-gray-100 border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none pr-12"
              />
              <text 
                :class="['fas absolute right-4 top-4 text-gray-400', showPassword ? 'fa-eye-slash' : 'fa-eye']"
                @click="togglePassword"
              ></text>
            </view>
          </view>
          
          <!-- 设备名称 -->
          <view>
            <text class="text-sm text-gray-600 mb-1 block">设备名称</text>
            <input 
              type="text" 
              v-model="wifiForm.deviceName"
              placeholder="给您的设备起个名字"
              class="w-full px-4 py-3 rounded-xl bg-gray-100 border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none"
            />
          </view>
        </view>
        
        <!-- 发送按钮 -->
        <view class="py-4">
          <button 
            class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium shadow-lg shadow-blue-200 transition-colors"
            :class="canProceedToStep3 ? 'hover:bg-blue-600' : 'opacity-50'"
            @click="goToStep3"
            :disabled="!canProceedToStep3"
          >
            发送到设备
          </button>
        </view>
      </view>

      <!-- 步骤3：连接成功 -->
      <view v-if="currentStep === 3" class="h-full flex flex-col items-center justify-center">
        <view class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mb-6">
          <text class="fas fa-check text-3xl text-green-500"></text>
        </view>
        
        <text class="text-xl font-medium mb-2">设备添加成功！</text>
        <text class="text-gray-500 mb-8 text-center">您的沙画设备已成功连接到网络</text>
        
        <button 
          class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium shadow-lg shadow-blue-200 hover:bg-blue-600 transition-colors"
          @click="startUsingDevice"
        >
          开始使用
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  import { deviceApi } from '@/api/index.js'

export default {
  name: 'AddDevice',
  data() {
    return {
      currentStep: 1,
      isSearching: false,
      selectedDevice: null,
      showPassword: false,
      wifiIndex: 0,
      deviceList: [
        {
          id: 'sandbot-a2f3',
          name: 'SandBot-A2F3',
          signalStrength: '良好'
        },
        {
          id: 'sandbot-b7c9',
          name: 'SandBot-B7C9',
          signalStrength: '一般'
        }
      ],
      wifiOptions: ['家庭WiFi', '办公室网络', '其他网络...'],
      wifiForm: {
        network: '家庭WiFi',
        password: '',
        deviceName: '客厅沙画机'
      }
    }
  },
  
  computed: {
    canProceedToStep3() {
      return this.wifiForm.network && this.wifiForm.password.trim() && this.wifiForm.deviceName.trim()
    }
  },
  
  onLoad() {
    // 页面加载时开始搜索设备
    this.startSearching()
  },
  
  methods: {
    startSearching() {
      this.isSearching = true
      // 模拟搜索过程
      setTimeout(() => {
        this.isSearching = false
      }, 3000)
    },
    
    refreshDevices() {
      if (this.isSearching) return
      this.startSearching()
    },
    
    connectDevice(device) {
      this.selectedDevice = device
      uni.showLoading({
        title: '连接中...'
      })
      
      // 模拟连接过程
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '连接成功',
          icon: 'success'
        })
        
        // 延迟跳转到下一步
        setTimeout(() => {
          this.goToStep2()
        }, 1000)
      }, 2000)
    },
    
    goToStep2() {
      this.currentStep = 2
    },
    
    async goToStep3() {
      if (!this.canProceedToStep3) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '配置中...'
      })

      try {
        // 调用添加设备接口，参数名需与云对象一致
        const res = await deviceApi.addDevice({
              deviceId: this.selectedDevice?.id,
              deviceName: this.wifiForm.deviceName,
              deviceType: 'pro',
              location: this.wifiForm.network // 将WiFi网络存储为设备位置
            })
        console.log('设备添加成功:', res)
        this.currentStep = 3
      } catch (e) {
        console.error('设备添加失败:', e)
        uni.showToast({
          title: '设备添加失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    onWifiChange(e) {
      this.wifiIndex = e.detail.value
      this.wifiForm.network = this.wifiOptions[e.detail.value]
    },
    
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    startUsingDevice() {
      // 跳转到设备控制页面
      uni.navigateTo({
        url: '/pages/device/control'
      })
    }
  }
}
</script>

<style scoped>
/* TailwindCSS 工具类样式 */
.bg-white { background-color: #ffffff; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-500 { background-color: #22c55e; }

.text-white { color: #ffffff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-blue-500 { color: #3b82f6; }
.text-green-500 { color: #22c55e; }

.h-screen { height: 100vh; }
.h-full { height: 100%; }
.h-1 { height: 8rpx; }
.w-8 { width: 64rpx; }
.w-24 { width: 192rpx; }
.w-full { width: 100%; }
.h-8 { height: 64rpx; }
.h-24 { height: 192rpx; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }

.px-6 { padding-left: 48rpx; padding-right: 48rpx; }
.px-4 { padding-left: 32rpx; padding-right: 32rpx; }
.py-3 { padding-top: 24rpx; padding-bottom: 24rpx; }
.py-4 { padding-top: 32rpx; padding-bottom: 32rpx; }
.pt-6 { padding-top: 48rpx; }
.pb-4 { padding-bottom: 32rpx; }
.pb-6 { padding-bottom: 48rpx; }
.p-4 { padding: 32rpx; }
.pr-12 { padding-right: 96rpx; }

.mr-2 { margin-right: 16rpx; }
.mx-2 { margin-left: 16rpx; margin-right: 16rpx; }
.mb-1 { margin-bottom: 8rpx; }
.mb-2 { margin-bottom: 16rpx; }
.mb-4 { margin-bottom: 32rpx; }
.mb-6 { margin-bottom: 48rpx; }
.mb-8 { margin-bottom: 64rpx; }
.mt-1 { margin-top: 8rpx; }

.border { border-width: 1rpx; }
.border-4 { border-width: 4rpx; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-blue-500 { border-color: #3b82f6; }

.rounded-xl { border-radius: 24rpx; }
.rounded-full { border-radius: 9999px; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.text-center { text-align: center; }
.text-xs { font-size: 24rpx; }
.text-sm { font-size: 28rpx; }
.text-lg { font-size: 36rpx; }
.text-xl { font-size: 40rpx; }
.text-3xl { font-size: 60rpx; }

.font-bold { font-weight: bold; }
.font-medium { font-weight: 500; }

.space-y-3 > view:not(:first-child) { margin-top: 24rpx; }
.space-y-4 > view:not(:first-child) { margin-top: 32rpx; }
.space-x-3 > view:not(:first-child) { margin-left: 24rpx; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-blue-200 { box-shadow: 0 10px 15px -3px rgba(147, 197, 253, 0.4), 0 4px 6px -2px rgba(147, 197, 253, 0.2); }

.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
.transition-all { transition: all 0.2s ease; }
.duration-500 { transition-duration: 0.5s; }

.overflow-auto { overflow: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }
.right-4 { right: 32rpx; }
.top-4 { top: 32rpx; }

.outline-none { outline: none; }
.block { display: block; }

.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }

/* 输入框样式 */
input, picker {
  width: 100%;
  padding: 24rpx 32rpx;
  border-radius: 24rpx;
  background-color: #f3f4f6;
  border: 1rpx solid #e5e7eb;
  outline: none;
  transition: all 0.2s ease;
  font-size: 28rpx;
  height: 96rpx;
  box-sizing: border-box;
}

input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.5);
}

/* 按钮样式 */
button {
  border-radius: 24rpx;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  box-sizing: border-box;
}

/* 设备列表项悬停效果 */
.device-item {
  cursor: pointer;
}

.device-item:hover {
  border-color: #3b82f6;
}

/* 动画效果 */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fa-spin {
  animation: spin 1s linear infinite;
}

/* Font Awesome 图标 */
.fas {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.fa-mountain:before { content: "\f6fc"; }
.fa-sync-alt:before { content: "\f2f1"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-eye:before { content: "\f06e"; }
.fa-eye-slash:before { content: "\f070"; }
.fa-check:before { content: "\f00c"; }

/* 自定义样式 */
.hover\:bg-blue-50:hover { background-color: #eff6ff; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:border-blue-500:hover { border-color: #3b82f6; }

.focus\:border-blue-500:focus { border-color: #3b82f6; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.5); }
.focus\:ring-blue-200:focus { box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.5); }

picker > view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 32rpx;
}
</style>
